<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>cmpick</title>
    <meta name="author" content="yihu.com"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="stylesheet" href="https://f1.yihuimg.com/concat/mobile/??3.0/cross/css/cross.css,3.0/cross/css/ui.all.css" type="text/css" />
    <link rel="stylesheet" href="../../cross/css/ui.all.css" type="text/css" />
</head>

<body class="bgc-fff">
	
<div class="c-main">
	<ul class="c-list c-border-tb c-f15">
		<li class="ptb8" id="pickerBtn1">
            <div class="c-list-key c-666">单列选择</div>
            <div class="c-list-info">
            	<input type="text" placeholder="请选择" class="listform-text c-t-right"/>
            </div>
        </li>
		<li class="ptb8" id="pickerBtn2">
            <div class="c-list-key c-666">多列选择</div>
            <div class="c-list-info">
            	<input type="text" placeholder="请选择" class="listform-text c-t-right"/>
            </div>
        </li>
        <li class="ptb8" id="pickerBtn3">
            <div class="c-list-key c-666">级联选择</div>
            <div class="c-list-info">
            	<input type="text" placeholder="请选择" class="listform-text c-t-right"/>
            </div>
        </li>
        <li class="ptb8" id="datePickerBtn">
            <div class="c-list-key c-666">时间</div>
            <div class="c-list-info">
            	<input type="text" placeholder="请选择时间" class="listform-text c-t-right"/>
            </div>
        </li>
    </ul>
	
	<section class="plr15">
		<h1 class="mt20 c-f16 c-000 bold">picker() 参数说明</h1>
		<p class="c-f15 c-666 mt10">
	    	items[]：数组，picker的数据<br>
	    	depth：picker的列数，取值为1-3,如为空，取items第一项的深度<br>
			id：默认"default"，用唯一标识缓存当时的选择<br>
			className：自定义类名<br>
			container：指定容器<br>
			defaultValue：默认初始选项<br>
			title：弹窗标题 <br>
			onChange：选中时的回调<br>
			onConfirm：点确定后的回调，返回选中的结果(Array) <br>
			onClose：关闭后的回调
	    </p>
		<h1 class="mt20 c-f16 c-000 bold">datePicker() 特定参数</h1>
	    <p class="c-f15 c-666 mt10">
	    	start：起始年份，默认值：2000<br>
	    	end ：结束年份，默认值：2030<br>
	    	如果是 Number 类型，表示起始年份；<br>
	    	如果是 String 类型，格式为 'YYYY-MM-DD'；<br>
	    	如果是 Date 类型，就传一个 Date
	    </p>
	    <p class="c-f15 c-666 mt10">
	    	cron："* * *" <br>
	    	dayOfMonth[1-31] <br> 
	    	month[1-12] <br>
	    	dayOfWeek[0-6]（周日-周六）<br>
	    	<span class="c-f00">@example</span><br>
	    	cron: '* * 0,6' (每逢周日、周六) <br>
	    	cron: '1-10 * *' (每月1日-10日)
	    </p>
	</section>
	
</div>


<script type="text/javascript" src="https://f1.yihuimg.com/concat/mobile/??3.0/cross/js/jquery/2.1.3/jquery.js,3.0/cross/js/cross.ui.js"></script>
<link rel="stylesheet" href="src/cmpick.css">
<script src="src/cmpick.js"></script>
<script>
$(function(){
	// 禁止输入法弹出
	$('.listform-text').prop('readonly', true).on('mousedown.dw', function (ev) {
	    ev.preventDefault();
	});

	// 单列picker
	$('#pickerBtn1').on('click',function(){
		var _this = $(this);
		cmpick.picker(
			[ //picker的数据,建议最多三层
				{
				    label: '飞机票',
				    value: 0,
				    disabled: true // 不可用
				},
				{
				    label: '火车票',
				    value: 1
				},
				{
				    label: '汽车票',
				    value: 3
				},
				{
				    label: '公车票',
				    value: 4,
				}
		], {
			   title: '单列选择', //弹窗标题栏
			   className: 'custom-classname', //自定义类名,为整个picker的父级
			   container: 'body', //指定容器
			   defaultValue: [3], //默认选项的value数组
			   onChange: function (result) {
			   		//在picker选中的值发生变化的时候回调
			       // console.log(result)
			   },
			   onConfirm: function (result) {
			   		//"确定"之后的回调结果(Array)
			       // console.log(result);
			       _this.find('input').val(result[0].label);
			   },
			   onClose: function (result) {
			   		//关闭后的回调
			   },
			   id: 'singleLinePicker' //作为picker的唯一标识，作用是以id缓存当时的选择。（当你想每次传入的defaultValue都是不一样时，可以使用不同的id区分）
		});
	})

	// 多列picker
	$('#pickerBtn2').on('click',function(){
		var _this = $(this);
		cmpick.picker([
		    {
		        label: '1',
		        value: '1'
		    }, {
		        label: '2',
		        value: '2'
		    }, {
		        label: '3',
		        value: '3'
		    }
		], [
		    {
		        label: 'A',
		        value: 'A'
		    }, {
		        label: 'B',
		        value: 'B'
		    }, {
		        label: 'C',
		        value: 'C'
		    }
		], {
			title: '多列选择',
		    defaultValue: ['3', 'A'],
			depth: 3, //picker深度(也就是picker有多少列) 取值为1-3。如果为空，则取items第一项的深度
		    onChange: function (result) {
		        console.log(result);
		    },
		    onConfirm: function (result) {
		        console.log(result);
		        _this.find('input').val(result[0].label+'-'+result[1].label);
		    },
		    id: 'multiPickerBtn'
		});
	});

	// 级联picker
	$('#pickerBtn3').on('click',function(){
		var _this = $(this);
		cmpick.picker([
		{
		    label: '飞机票',
		    value: 0,
		    children: [
		        {
		            label: '经济舱',
		            value: 1
		        },
		        {
		            label: '商务舱',
		            value: 2
		        }
		    ]
		},
		{
		    label: '火车票',
		    value: 1,
		    children: [
		        {
		            label: '卧铺',
		            value: 1,
		            disabled: true // 不可用
		        },
		        {
		            label: '坐票',
		            value: 2
		        },
		        {
		            label: '站票',
		            value: 3
		        }
		    ]
		},
		{
		    label: '汽车票',
		    value: 3,
		    children: [
		        {
		            label: '快班',
		            value: 1
		        },
		        {
		            label: '普通',
		            value: 2
		        }
		    ]
		}
		], {
		   className: 'custom-classname',
		   container: 'body',
		   defaultValue: [1, 3],
		   onChange: function (result) {
		       console.log(result)
		   },
		   onConfirm: function (result) {
		       console.log(result);
		       _this.find('input').val(result[0].label+'-'+result[1].label);
		   },
		   id: 'doubleLinePicker'
		});
	});

	$('#datePickerBtn').on('click',function(){
		var _this = $(this);
		cmpick.datePicker({
		    start: 1990,
		    end: new Date(),
		    title: '选择日期',
		    defaultValue: [2018, 6, 9],
		    onChange: function(result){
		        console.log(result);
		    },
		    onConfirm: function(result){
		        console.log(result);
		        _this.find('input').val(result[0]+'-'+result[1]+'-'+result[2]);
		    },
		    id: 'datePicker'
		});
	})
})
	
	
</script>
</body>
</html>